<script setup>
import { useStudentStore } from "@/store/store"
import { toRefs } from "vue"
import { storeToRefs } from "pinia"

const stu = useStudentStore()
const { name, age, gender } = storeToRefs(useStudentStore())
/* 
  store实例
    - 通过use函数返回的对象就是store实例
    - 通过store实例可以完成对其中的响应式状态的各种操作
    - store实例就是一个响应式对象
    - 作用：
      1.可以访问其中的state、getters、actions
      2.可以通过storeToRefs()来完成对store实例的解构
      3.可以直接通过它来修改state
      4.也可以通过$patch()来修改state
      5.可以通过$reset()来重置state
      6.$id、$state
      7.订阅state、action
        stu.$subscribe() -> 订阅state，订阅是和组件绑定的
        stu.$onAction() -> 订阅action

*/
stu.$onAction(({ name, store, args, after, onError }) => {
  /* 
    name 触发的action
    store store实例
    args action的参数
    after 设置回调函数
    onError action出错时调用的回调函数

  */
  console.log("action执行前调用的", name)

  after((result) => {
    console.log("action执行后调用的", name, result)
  })

  // 回调函数，会在action前执行
  // console.log("store中的方法调用了~~~~")
})
</script>

<template>
  <h2>Box</h2>
  <h3>
    {{ stu.name }} -- {{ stu.age }} -- {{ stu.gender }}-- {{ stu.weapons }}
  </h3>
  <h3>{{ name }} -- {{ age }} -- {{ gender }}</h3>
  <button @click="stu.name = '猪八戒'">修改1</button>
  -
  <button @click="stu.$patch({ age: 888 })">修改2</button>
  -
  <button @click="stu.weapons.push('大师剑')">修改3</button>
  -
  <button @click="stu.$patch({ weapons: [...stu.weapons, '大师剑'] })">
    修改4
  </button>
  -
  <button @click="stu.$patch((state) => state.weapons.push('驱魔剑'))">
    修改5
  </button>
  -
  <button @click="stu.$state = { name: '沙和尚' }">修改6</button>
  -
  <button @click="stu.$reset()">重置</button>

  -
  <!-- <button @click="stop">取消订阅</button> -->
</template>

<style scoped></style>
